//项目的根组件
// App -> index.js -> public/index.html(root)

const count = 100;
function getName() {
  return "jack";
}

// 列表渲染
const list = [
  { id: 1001, name: "vue" },
  { id: 1002, name: "React" },
  { id: 1003, name: "Angular" },
];

// 条件渲染
const isLogin = true;

// 条件渲染--复杂情况
// 定义文章类型
const articleType = 0; // 0 代表无图模式  1 代表单图模式  2 代表三图模式

// 定义核心函数 (根据 文章类型返回不同的  JSX  模板)
function getArticleTem() {
  if (articleType === 0) {
    return <div> 无图模式 </div>;
  } else if (articleType === 1) {
    return <div> 单图模式 </div>;
  } else {
    return <div> 多图模式 </div>;
  }
}


// 定义组件--普通函数
function Button1() {
  // 业务逻辑和视图 UI
  return <button style={{color: 'red'}}>this is component</button>
}

// 定义组件--箭头函数
const Button2 = () => {
  // 业务逻辑和视图 UI
  return <button style={{color: 'red'}}>this is component 2</button>
}

function App() {
  // 事件绑定
  const handleClick = () => {
    console.log("button 被点击了");
  };
  // 事件绑定--拿去事件参数  e
  const handleClickAndE = (e) => {
    console.log("button 被点击了", e);
  };
  // 事件绑定--传递自定义参数
  const handleClickAndProps = (name) => {
    console.log("button 传递自定义参数", name);
  };
  // 事件绑定--传递自定义参数 + e 
  const handleClickAndPropsAndE = (name,e) => {
    console.log("button 传递自定义参数", name,e);
  };

  return (
    <div className="App">
      This is React
      {/* 1. 使用引号传递字符串 */}
      {"this is message"}
      {/* 2. 识别js 变量 */}
      {count}
      {/* 3. 函数调用 */}
      {getName()}
      {/* 4. 方法调用 */}
      {"---" + new Date().getDate()}
      {/* 5. 使用js 对象 */}
      <div style={{ color: "red" }}>this is div</div>
      {/* 列表渲染 */}
      {/* map 循环哪个结构  return结构 */}
      {/* 注意事项: 加上一个 独一无二的key  字符串或者number */}
      {/* key的作用: React 框架内部使用  提升更新性能的 */}
      <ul>
        {list.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      {/* 条件渲染:  逻辑与   && */}
      {isLogin && <span>this is span</span>}
      {<div></div>}
      {/* 三元运算 */}
      {isLogin ? <span>true show jack</span> : <span>false show loading...</span>}
      {/* 条件渲染: 复杂情况. 调用函数渲染不同的模板 */}
      {getArticleTem()}

      {/* 事件绑定 */}
      <button onClick={handleClick}>click me</button>
      {/* 事件绑定--拿取参数  e */}
      <button onClick={handleClickAndE}>click me get e</button>
      {/* 事件绑定--传递自定义参数  */}
      <button onClick={()=>handleClickAndProps('jack')}>click me get props</button>
      {/* 事件绑定--传递自定义参数 + e */}
      <button onClick={(e)=>handleClickAndPropsAndE('jack', e)}>click me get props + e</button>


      {/* 使用组件(渲染组件)方式1--自闭合 */}
      <Button1/>
      {/* 使用组件(渲染组件)方式2--成对标签 */}
      <Button1></Button1>
      
      {/* 使用箭头函数组件*/}
      <Button2/>
    </div>
  );
}

export default App;
